<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="tag" uri="http://www.springframework.org/tags" %>

<script type="text/javascript" src="<%=request.getContextPath()%>/resources/javascripts/jquery.ui.datepicker-pl.js"></script>
<script>
	$(function() {
		$( "#holidaysStartDate, #holidaysEndDate" ).datepicker({
			dateFormat: 'dd-mm-yy',
			showAnim: 'slideDown',
			onSelect: function(dateText, inst) { 
				getWorkingDays();	
			}
			
		}
		);
		$.datepicker.regional[ "pl" ];
	});
	
	function getWorkingDays(){
		if(checkDates()){
			$.getJSON("/FreeTimeTool/holidayrequest/workingDays",{startDate: $('#holidaysStartDate').val(),
				endDate: $('#holidaysEndDate').val()},
				function(workingDays){
					$("#workingDays").text("Liczba dni urlopu: "+workingDays);
				});
		}
	}
	
	function checkDates() {
		if( $("#holidaysStartDate").val() && $("#holidaysEndDate").val()){
			return true;
		}
		return false;
	}
	</script>

<div class="form">
	<form:form commandName="holidayRequest">
	<ol>
		<li>
			<form:label path="holidaysStartDate"><tag:message code="holidayRequests.startDate" /></form:label> 
			<form:input path="holidaysStartDate" id="holidaysStartDate" />
			<form:errors path="holidaysStartDate" />
		</li>
		<li>
			<form:label path="holidaysEndDate"><tag:message code="holidayRequests.endDate" /></form:label> 
			<form:input path="holidaysEndDate" id="holidaysEndDate" />
			<form:errors path="holidaysEndDate" />
		</li>
		<li>
			<form:label path="kind"><tag:message code="holidayRequests.kind" /></form:label> 
			<form:input path="kind" />
			<form:errors path="kind" />
			<form:hidden path="status" value="true"/>
		</li>
		<li class="submit">
			<input type="submit" />
		</li>
	</ol>
	<div id="workingDays" style ="font-weight: bold;"></div>
	</form:form>
</div>